<template>
  <div>
    <fm-generate-form
      :data="jsonData"
      :remote="remoteFuncs"
      :value="editData"
      ref="generateForm"
    >
    </fm-generate-form>
    <el-button type="primary" @click="handleSubmit">提交</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      jsonData: {
        list: [
          {
            type: 'grid',
            icon: 'icon-grid-',
            columns: [
              {
                span: 12,
                list: [
                  {
                    type: 'input',
                    icon: 'icon-input',
                    options: {
                      width: '100%',
                      defaultValue: '',
                      required: true,
                      dataType: 'string',
                      pattern: '',
                      placeholder: '请输入',
                      disabled: false,
                      maxlength: -1,
                      showWordLimit: false,
                      remoteFunc: 'func_1723513443000_36218'
                    },
                    name: '资产编码',
                    key: '1723513443000_36218',
                    model: 'assetCode',
                    rules: [
                      { type: 'string', message: '资产编码格式不正确' },
                      { required: true, message: '资产编码必须填写' }
                    ]
                  },
                  {
                    type: 'date',
                    icon: 'icon-date',
                    options: {
                      defaultValue: '',
                      readonly: false,
                      disabled: false,
                      editable: false,
                      clearable: true,
                      placeholder: '',
                      startPlaceholder: '',
                      endPlaceholder: '',
                      type: 'date',
                      format: 'yyyy-MM-dd',
                      timestamp: false,
                      required: true,
                      width: '',
                      remoteFunc: 'func_1723513816000_98193'
                    },
                    name: '购入日期',
                    key: '1723513816000_98193',
                    model: 'date',
                    rules: [{ required: true, message: '购入日期必须填写' }]
                  },
                  {
                    type: 'select',
                    icon: 'icon-select',
                    options: {
                      defaultValue: '',
                      multiple: false,
                      disabled: false,
                      clearable: false,
                      placeholder: '请选择',
                      required: true,
                      showLabel: false,
                      width: '',
                      options: [
                        { value: 'Option 1' },
                        { value: 'Option 2' },
                        { value: 'Option 3' }
                      ],
                      remote: true,
                      filterable: false,
                      remoteOptions: [],
                      props: { value: 'value', label: 'label' },
                      remoteFunc: 'getSelectData'
                    },
                    name: '生产厂商',
                    key: '1723532362000_65741',
                    model: 'company',
                    rules: [{ required: true, message: '生产厂商必须填写' }]
                  }
                ]
              },
              {
                span: 12,
                list: [
                  {
                    type: 'select',
                    icon: 'icon-select',
                    options: {
                      defaultValue: '整机',
                      multiple: false,
                      disabled: false,
                      clearable: false,
                      placeholder: '请选择',
                      required: true,
                      showLabel: false,
                      width: '',
                      options: [
                        { value: '整机' },
                        { value: '部件' },
                        { value: '办公用品' }
                      ],
                      remote: false,
                      filterable: false,
                      remoteOptions: [],
                      props: { value: 'value', label: 'label' },
                      remoteFunc: 'func_1723513476000_75645'
                    },
                    name: '资产类别',
                    key: '1723513476000_75645',
                    model: 'assetType',
                    rules: [{ required: true, message: '资产类别必须填写' }]
                  },
                  {
                    type: 'input',
                    icon: 'icon-input',
                    options: {
                      width: '100%',
                      defaultValue: '',
                      required: false,
                      dataType: 'string',
                      pattern: '',
                      placeholder: '请输入序列号',
                      disabled: false,
                      maxlength: -1,
                      showWordLimit: false,
                      remoteFunc: 'func_1723513446000_14975'
                    },
                    name: '序列号',
                    key: '1723513446000_14975',
                    model: 'serial',
                    rules: [{ type: 'string', message: '序列号格式不正确' }]
                  },
                  {
                    type: 'radio',
                    icon: 'icon-radio-active',
                    options: {
                      inline: true,
                      defaultValue: 'Option 1',
                      showLabel: false,
                      options: [
                        { value: '是', label: 'Option 1' },
                        { value: '否', label: 'Option 2' }
                      ],
                      required: false,
                      width: '',
                      remote: false,
                      remoteOptions: [],
                      props: { value: 'value', label: 'label' },
                      remoteFunc: 'func_1723532836000_91258',
                      disabled: false
                    },
                    name: '远程监控',
                    key: '1723532836000_91258',
                    model: 'remote',
                    rules: []
                  }
                ]
              }
            ],
            options: {
              gutter: 0,
              justify: 'start',
              align: 'top',
              remoteFunc: 'func_1723513439000_90645'
            },
            name: '栅格布局',
            key: '1723513439000_90645',
            model: 'grid_1723513439000_90645',
            rules: []
          }
        ],
        config: { labelWidth: 100, labelPosition: 'right', size: 'small' }
      },
      editData: {},
      remoteFuncs: {
        getSelectData(resolve) {
          // 生产厂商 company
          // Call callback function once get the data from remote server
          // resolve(data)
        }
      }
    };
  },
  methods: {
    handleSubmit() {
      this.$refs.generateForm
        .getData()
        .then((data) => {
          // data check success
          // data - form data
        })
        .catch((e) => {
          // data check failed
        });
    }
  }
};
</script>
